<!DOCTYPE html>
<html>
  <head>
    <title>您收到一条消息</title>
    <meta charset="utf-8" />
    <style type="text/css">
      html,body{
       background-image:url(img/background.png);
       width:100%;
       height:100%;
       overflow:hidden;
      }
   .image{
    position: absolute;
    top: 17vh;
    left: 38vw;
    width: 107vh;
    height: 39vw;
   }
   .image2{
    position: absolute;
    top: 31vh;
    left:52vw;
    transform: scale(0.4) rotateZ(-18deg) ;
   }
   .image2:hover{
      transform:scale(0.5);
   }
      .clock{
       position:relative;
       width:47vh;
       height:21vw;
       background-image:url(img/clock.png);
       background-repeat:no-repeat;
       background-size:cover;
      }
   .clock div{
        position:absolute;
          left:55%;
          top:50%;
          transform-origin:bottom;
          transform:translate(-50%,-100%) rotatez(0deg);
          width:5px;
          border-radius:30px;
         }
         /* 时针动画 */
         #hour{
          height:7vh;
          background-color:#000000;
          
          animation:clock 10s linear 1;/* 指定时针animation动画 */
         }
        
         #second{
          height:9vh;
          background-color:#ff0000;
          
          animation:clock 0.5s linear infinite;
        }
    
         @keyframes clock{
        100%{transform:translate(-50%,-100%) rotatez(360deg);}
         }
       </style>
         </head>
         <body>
           <img class="image" src="img/computer.png" />
           <a href="detailf.html"><img class="image2" src="img/message.png"></a>
           <div class="clock">
             <div id="hour"></div>
           </div>
         </body>
       </html>
